<template>
	<!-- 轮播 -->
	<view class="banner-swiper-wrap u-m-b-10">
		<u-navbar backIconName="" immersive :borderBottom="false" :is-fixed="true"
			:background="{ background: changeNavBackground ? `url(${navBgImage}) no-repeat top / 100% auto` : 'none' }">
			<view hover-class="" class="search-box u-flex u-row-center u-col-center u-m-r-30"
				@tap="$Router.push('/pages/public/search')">
				<u-icon class="left" name="search" color="#999" :fontSize="38"></u-icon>
				<view class="btn">
					搜索
				</view>
			</view>
		</u-navbar>

		<u-swiper class="banner" :height="height" :list="list" :autoplay="autoplay" :borderRadius="borderRadius"
			:indicator-pos="indicatorPos" :mode="mode" :interval="interval" :duration="duration" :circular="circular"
			:imgMode="imgMode" :bgColor="bgColor" @click="onSwiper" @change="onChange"></u-swiper>
	</view>
</template>

<script>
	/**
	 * home-head-轮播卡片,主要为了处理数据
	 * @property {Array} list 轮播图数据，
	 * @property {String} mode 指示器模式
	 * @property {String} navTitle 项目名称
	 * @property {String Number} height 轮播图组件高度，单位rpx（默认250）
	 * @property {String} indicator-pos 指示器的位置（默认bottomCenter）
	 * @property {Boolean} autoplay 是否自动播放（默认true）
	 * @property {Boolean} circular 是否衔接播放（默认true）
	 * @property {String Number} interval 隔多久换，单位ms（默认2500）
	 * @property {String Number} duration 自动轮播时间间隔，单位ms（默认500）
	 * @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
	 * @property {String} borderRadius 圆角值
	 * @property {String} bgColor 背景色
	 * @event {Function} click 点击轮播图时触发
	 */
	export default {
		components: {},
		data() {
			return {
				navBgImage: '',
				changeNavBackground: false,
				swiperCur: 0
			};
		},
		props: {
			isScorll: {
				type: Boolean,
				default: false
			},
			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			navTitle: {
				type: String,
				default: 'Shopro商城'
			},
			navTitleStyle: {
				type: Object,
				default: () => {
					return {
						color: '#fff',
						fontSize: '38rpx'
					};
				}
			},
			// 圆角值
			borderRadius: {
				type: [Number, String],
				default: 0
			},
			// 隔多久自动切换
			interval: {
				type: [String, Number],
				default: 3000
			},
			// 指示器的模式，rect|dot|number|round
			mode: {
				type: String,
				default: 'round'
			},
			// list的高度，单位rpx
			height: {
				type: [Number, String],
				default: 400
			},
			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
			indicatorPos: {
				type: String,
				default: 'bottomCenter'
			},

			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
			// 自动轮播时间间隔，单位ms
			duration: {
				type: [Number, String],
				default: 500
			},
			// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
			circular: {
				type: Boolean,
				default: true
			},
			// 图片的裁剪模式
			imgMode: {
				type: String,
				default: 'widthFix'
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: '#f3f4f6'
			}
		},
		watch: {
			isScorll(newValue, oldValue) {
				this.changeNavBackground = newValue;
				this.navBgImage = this.list[this.swiperCur].image;
				// console.log(list,'轮播')
			}
		},
		computed: {},
		created() {
			// console.log(this.list,'---------')
			// this.navBgImage = this.list[0].image;
		},
		methods: {
			onSwiper(e) {
				this.$tools.routerTo(this.list[e].path);
			},
			onChange(e) {
				this.swiperCur = e;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.banner {
		height: 382rpx;
	}

	// 轮播

	.banner-swiper-wrap {
		height: 400rpx;
		position: relative;
		z-index: 100;

		.search-box {
			width: 686rpx;
			display: flex;
			justify-content: space-between;
			height: 66rpx;
			background-color:rgba($color: #ffffff, $alpha: 0.6);
			border-radius: 33rpx;

			.left {
				margin: 0 40rpx;
			}
			.btn{
				width: 134rpx;
				background-color: #F9A81F;
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 33rpx;
				text-align: center;
				color: #FFFFFF;
			}
			
		}

		.hover-search {
			background: rgba(#fff, 0.18);
		}
	}
</style>
